<div class="clear span-8">
  <div class="sample">
    <div class="widget" id="strokes_sample"></div>
  </div>
  <h3>strokes</h3>
  <p>
    Sets the strokes in the widget.
    If the <tt>json</tt> parameter is not provided,
    returns an array of strokes.
  </p>

  <h4>Parameters</h4>
  <ol>
    <li>strokes <code>array</code></li>
  </ol>
</div>
<div class="span-16 last">
  {% capture js %}
// The viewer shows a black diagonal path.
// path parameter can be array or SVG path format, e.g., "M10,10L90,90".
viewer.strokes([{
  "type":"path",
  "path":[["M",10,10],["L",90,90]],
  "fill":"none",
  "stroke":"#000000",
  "stroke-opacity":1,
  "stroke-width":5,
  "stroke-linecap":"round",
  "stroke-linejoin":"round"
}]);

// Returns an array of strokes.
var strokes = viewer.strokes();
{% endcapture %}
  <pre class="code">{{ js | strip | escape }}</pre>

  <script type="text/javascript">
    $(document).ready(function() {
      var strokes_sample = Raphael.sketchpad("strokes_sample", {
        width: 100,
        height: 100,
        editing: false
      });
      strokes_sample.strokes([{
        "type":"path",
        "path":[["M",10,10],["L",90,90]],
        "fill":"none",
        "stroke":"#000000",
        "stroke-opacity":1,
        "stroke-width":5,
        "stroke-linecap":"round",
        "stroke-linejoin":"round"
      }]);
    });
  </script>
</div>
